import React, { useState } from 'react';
import { Layout, Breadcrumb, Card, Table, Button, Modal, Form, Input, Select, DatePicker, message } from 'antd';
import { Content } from 'antd/es/layout/layout';
import { PlusOutlined, PhoneOutlined, MailOutlined, UserOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';

const { Option } = Select;

const Visitors = () => {
  const [visitors, setVisitors] = useState([
    { id: 1, name: '张三', company: 'ABC医药公司', purpose: '商务洽谈', visitTime: '2023-05-15 10:00', phone: '13800138001', status: '已接待' },
    { id: 2, name: '李四', company: 'XYZ药业', purpose: '产品咨询', visitTime: '2023-05-16 14:30', phone: '13800138002', status: '待接待' },
    { id: 3, name: '王五', company: 'DEF连锁药店', purpose: '合作洽谈', visitTime: '2023-05-17 09:15', phone: '13800138003', status: '已完成' },
  ]);

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();

  const columns = [
    {
      title: '访客姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '公司',
      dataIndex: 'company',
      key: 'company',
    },
    {
      title: '来访目的',
      dataIndex: 'purpose',
      key: 'purpose',
    },
    {
      title: '预约时间',
      dataIndex: 'visitTime',
      key: 'visitTime',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        let color = 'default';
        if (status === '待接待') color = 'orange';
        if (status === '已接待') color = 'blue';
        if (status === '已完成') color = 'green';
        return <span style={{ color: color === 'default' ? undefined : color }}>{status}</span>;
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => (
        <Button type="link">查看详情</Button>
      ),
    },
  ];

  const showModal = () => {
    form.resetFields();
    setIsModalVisible(true);
  };

  const handleOk = () => {
    form.validateFields().then(values => {
      const newVisitor = {
        id: visitors.length > 0 ? Math.max(...visitors.map(v => v.id)) + 1 : 1,
        ...values,
        visitTime: values.visitTime.format('YYYY-MM-DD HH:mm'),
        status: '待接待'
      };
      setVisitors([...visitors, newVisitor]);
      message.success('访客预约成功！');
      form.resetFields();
      setIsModalVisible(false);
    });
  };

  const handleCancel = () => {
    form.resetFields();
    setIsModalVisible(false);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Layout className="site-layout">
        <Content style={{ margin: '16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>与访客联系</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360, background: '#fff' }}>
            <Card 
              title="访客预约管理" 
              bordered={false}
              extra={
                <Button 
                  type="primary" 
                  icon={<PlusOutlined />} 
                  onClick={showModal}
                >
                  预约登记
                </Button>
              }
            >
              <Table dataSource={visitors} columns={columns} pagination={{ pageSize: 5 }} />
            </Card>
          </div>
        </Content>
      </Layout>

      <Modal
        title="访客预约登记"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="name"
            label="访客姓名"
            rules={[{ required: true, message: '请输入访客姓名!' }]}
          >
            <Input prefix={<UserOutlined />} />
          </Form.Item>
          <Form.Item
            name="company"
            label="公司"
            rules={[{ required: true, message: '请输入访客所在公司!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="purpose"
            label="来访目的"
            rules={[{ required: true, message: '请输入来访目的!' }]}
          >
            <Select placeholder="请选择来访目的">
              <Option value="商务洽谈">商务洽谈</Option>
              <Option value="产品咨询">产品咨询</Option>
              <Option value="合作洽谈">合作洽谈</Option>
              <Option value="售后服务">售后服务</Option>
              <Option value="其他">其他</Option>
            </Select>
          </Form.Item>
          <Form.Item
            name="visitTime"
            label="预约时间"
            rules={[{ required: true, message: '请选择预约时间!' }]}
          >
            <DatePicker showTime format="YYYY-MM-DD HH:mm" style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item
            name="phone"
            label="联系电话"
            rules={[{ required: true, message: '请输入联系电话!' }]}
          >
            <Input prefix={<PhoneOutlined />} />
          </Form.Item>
          <Form.Item
            name="email"
            label="邮箱"
          >
            <Input prefix={<MailOutlined />} />
          </Form.Item>
        </Form>
      </Modal>
    </Layout>
  );
};

export default Visitors;